
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="./css/global.css" rel="stylesheet"/>

    <style>
        body {
            padding-bottom: 200px;
            display: flex; /*设置为flex布局*/
            justify-content: center; /*水平居中*/
            align-items: center; /*垂直居中*/
        }

        .login-container {

            padding: 20px;
            display: flex; /*设置为flex布局*/
            justify-content: center; /*水平居中*/
            align-items: center; /*垂直居中*/
            border: 1px solid black;
        }

        label {
            display: flex;
        }

        label > span, label > input, .button > a {
            flex: 1; /*让元素占据剩余空间，如果每个都是1，则平分*/
        }

        .button {
            margin-top: 20px;
            text-align: center;
        }

        .button > button {
            margin: 0 20px 0 20px;
        }

        input {
            padding-left: 10px;
            outline: none;
            border: 1px solid #999;
        }
    </style>
</head>

<body>

<div class="login-container">
    <form class="login-form" method="post" action="userLogin">
        <label>
            <span>用户名</span>
            <input type='text' name='username' value="${cookie.username.value }">
        </label>
        <br>
        <label>
            <span>口令</span>
            <input type='password' name='password' value="${cookie.password.value }">
        </label>
        <br>
        <label style="margin-top: 5px">
            <span style="font-size: 12px">记住我</span>
            <input type='checkbox' name="remember" checked value="1" style="vertical-align:middle;margin-top:3px;">
        </label>
            <p style="color: #ff0000">
                ${errMessage}
            </p>
        <div class="button">
            <button type="submit" id="login">登录</button>
            <button type="reset" id="reset">重置</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $("#reset").click(function () {
        $("input").attr("value","");
    })
</script>
</body>


</html>
